<template>
  <div>
    <!-- 头部 -->
    <navBar
      @onClickLeft="onClickLeft"
      @onClickRight="onClickRight"
      :title="title"
      left-text="返回"
      :right-text="rightText"
      :url="url"
    ></navBar>
    <!-- 购物车列表 -->
    <van-sticky>
      <van-cell-group>
        <van-cell title="购物车列表" icon="shop-o" size="large" />
      </van-cell-group>
    </van-sticky>

    <!-- 商品 -->
    <van-row v-for="item in shopList" :key="item.goods_id">
      <!-- 左滑功能 -->
      <van-swipe-cell>
        <!--购物车按钮  -->
        <van-col span="2">
          <van-checkbox
            v-model="item.checked"
            checked-color="red"
            :name="item.goods_id"
            class="checkbox"
            @change="Onechange(item.goods_id,shopList)"
          ></van-checkbox>
        </van-col>

        <van-col span="20">
          <!-- 购物车内容 -->
          <van-card
            :price="item.goods_price"
            :title="item.goods_name"
            :thumb="item.goods_small_logo"
          >
            <!-- 输入框 -->
            <div slot="footer">
              <van-stepper
                v-model="item.goods_number"
                min="1"
                async-change
                @change="numChange(item.goods_id,item.goods_number)"
              />
            </div>
          </van-card>
        </van-col>
        <!-- 左滑删除块 -->
        <template slot="right">
          <van-button square type="danger" text="删除" />
        </template>
      </van-swipe-cell>
      <!-- 底部提交 -->
      <van-submit-bar
        :price="changeTotle"
        button-text="提交订单"
        @submit="onSubmit"
        safe-area-inset-bottom
      >
        <van-checkbox checked-color="red" @change="changeAll(shopList)" v-model="allChecked">全选</van-checkbox>
      </van-submit-bar>
    </van-row>
  </div>
</template>
<script>
import navBar from '../../util/navBar'
import { mapState, mapGetters } from 'vuex'
export default {
  data() {
    return {
      title: '黑马优购',
      rightText: '',
      url: '',
      changeArr: [],
      allChecked: true
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    onClickRight() {},
    // 提交订单逻辑
    onSubmit() {},
    //价格计算
    numChange(id, num) {
      this.$store.commit('changePrice', id, num)
    },
    // 单选选择
    // Onechange(id, shopList) {
    //   if (shopList.checked === true) {
    //     this.changeArr.push(id)
    //   } else {
    //     this.remove(this.changeArr, id)
    //   }
    //   if (this.changeArr.length < shopList,length) {
    //     this.allChecked = false
    //   } else {
    //     this.allChecked = true
    //   }
    // },
    // 多选选择
    // changeAll(shopList) {
    //     if(allChecked === true){
    //         shopList.forEach()
    //     }
    // }
  },
  computed: {
    ...mapState(['shopList']),
    ...mapGetters(['changeTotle'])
  },
  components: { navBar }
}
</script>
<style lang="less" scoped>
.van-row {
  background-color: #fafafa;
}
.checkbox {
  margin: 3rem 0 0 0.3rem;
}
.van-submit-bar {
  bottom: 50px;
}
</style>